<template>
  <div class="dashboard-editor-container" style="line-height: 60px">
    <!--    <div class="title">欢迎使用公路隧道养护系统</div>-->
    <el-select v-model="data" @change="colick1" placeholder="请选择公路">
      <el-option
        v-for="dict in gongluList"
        :key="dict.id + ''"
        :label="dict.field2"
        :value="[dict.sd_jwd,dict.endpoint,dict.field2,dict.id] + ''"
      ></el-option>
    </el-select>
    <!--    <el-button @click="colick1"> </el-button>-->
    <div
      id="container"
      style="
        cursor: default;
        background-color: rgb(247, 247, 247);
        border: 1px solid #568aff;
      "
    >
    </div>
  </div>
</template>

<script>
  import router from "../router";

  window._AMapSecurityConfig = {
    securityJsCode: "a09e66257502368b9f9ff599f86ef40f"
  };
  import AMapLoader from "@amap/amap-jsapi-loader";
  import { getMaplist } from "@/api/biz/gonglu";
  export default {
    name: "Index",
    components: {
      map: null,
    },
    data() {
      return {
        current1: [[],[]],
        gongluList: '',
        data: '',
        roadname: '渝筑高速',
        code: 3,
      };
    },
    mounted() {
      //DOM初始化完成进行地图初始化
      this.initMap();
      getMaplist({
        sql: "SELECT CONCAT(field20,',',field21) sd_jwd,CONCAT(field22,',',field23) endpoint,field2,id FROM biz_gonglu WHERE field20 is NOT NULL and field21 is not NULL",
      }).then((response) => {
        this.gongluList = response.data;
        // console.log(this.gongluList)
      });

    },
    methods: {
      colick1(){
        // console.log(this.data)
        this.current1[0][0] = this.data.split(',')[0]
        this.current1[0][1] = this.data.split(',')[1]
        this.current1[1][0] = this.data.split(',')[2]
        this.current1[1][1] = this.data.split(',')[3]
        this.roadname = this.data.split(',')[4]
        this.code = Number(this.data.split(',')[5])
        // console.log(111)
        // console.log(this.data.split(',')[5])
        this.initMap()
      },
      initMap() {
        AMapLoader.load({
          key: "c2ab26cf85dc2acc8fa22213454c2617", //设置您的key
          version: "2.0",
          plugins: ["AMap.ToolBar", "AMap.Driving","AMap.MouseTool"],
          AMapUI: {
            version: "1.1",
            plugins: []
          },
          Loca: {
            version: "2.0"
          }
        })
          .then(AMap => {
            this.map = new AMap.Map("container", {
              viewMode: "2D",
              zoom: 12,
              zooms: [2, 22],
              center: [106.55659, 29.582054]
            });
            // map.setMapStyle('amap://styles/地图样式ID');
            // this.map.setFeatures("road");
            var lnglat = new AMap.LngLat(106.55659, 29.582054)
            var driving = new AMap.Driving({
              map: this.map
            });

            //自定义菜单类
            function ContextMenu(map,roadname,code) {
              var me = this;

              //地图中添加鼠标工具MouseTool插件
              this.mouseTool = new AMap.MouseTool(map);

              this.contextMenuPositon = null;

              var content = [];

              // content.push("<div class='info context_menu'>");
              // content.push("  <p onclick=''>缩小</p>");
              // content.push("</div>");

              //通过content自定义右键菜单内容
              this.contextMenu = new AMap.ContextMenu({isCustom: true, content: content.join('')});

              this.contextMenu.addItem("增加隧道", function () {
                // console.log(me.contextMenuPositon)
                let lng = me.contextMenuPositon.lng
                let lat = me.contextMenuPositon.lat

                router.push({
                  path: 'system/suidao',
                  query:{
                    data: lng+","+lat,
                    roadname: roadname,
                    code: code,
                  }
                })
              }, 0);
              this.contextMenu.addItem("查询公路", function () {
                router.push({
                  path: '/system/gonglu',
                  query:{
                    roadname: roadname
                  }
                })
              }, 1);
              // this.contextMenu.addItem("查询隧道", function () {
              //   router.push({path: '/system/suidao'})
              // }, 2);
              this.contextMenu.addItem("查询总体技术状况评定", function () {
                router.push({
                  path: '/technicaltotal',
                  query:{
                    roadname: roadname
                  }
                })
              }, 2);
              //地图绑定鼠标右击事件——弹出右键菜单
              map.on('rightclick', function (e) {
                me.contextMenu.open(map, e.lnglat);
                me.contextMenuPositon = e.lnglat; //右键菜单位置
              });
            }

            //创建右键菜单
            var menu = new ContextMenu(this.map,this.roadname,this.code);

            // menu.contextMenu.open(this.map, lnglat);

            getMaplist({
              sql: "SELECT CONCAT(field21,',',field20) sd_jwd,field2,field22 FROM biz_suidao",
            }).then((response) => {
              var gongluList = response.data;
              gongluList.forEach(element => {
                if (element.field22===this.roadname){
                  //点标记
                  var marker = new AMap.Marker({
                    position: element.sd_jwd.split(","), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    title: this.roadname+'-'+element.field2,
                  });
                  this.map.add(marker);

                  const markerClick = () => {

                    // let info = [];
                    // let title = "<span style=\"font-size:11px;color:black;\">"+element.field22+"</span>"
                    // let address = "<span style=\"font-size:11px;color:black;\">"+element.field2+"</span>"
                    // info.push(title);
                    // info.push(address);
                    // // info.push("<a href='http://localhost/system/suidao'>隧道基本信息</a>");
                    //
                    // let infoWindow = new AMap.InfoWindow({
                    //   content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
                    // });
                    // infoWindow.open(this.map,marker.getPosition())
                    // marker.on('click',markerClick);


                    //创建右键菜单
                    var contextMenu = new AMap.ContextMenu();

                    contextMenu.addItem("查询隧道", function () {
                      router.push({
                          path: '/system/suidao',
                          query:{
                            suidaoname: element.field2
                          }
                        })
                    }, 0);
                    contextMenu.open(this.map, marker.getPosition());
                  }

                  // infoWindow.on('open',showInfoOpen)
                  // infoWindow.on('close',showInfoClose)
                  // marker.on('click',markerClick);
                  marker.on('click',markerClick);
                }
              });
            })
              .catch((e) => {
                console.log(e);
              })
            driving.search(
              new AMap.LngLat(this.current1[0][0],this.current1[0][1]),
              new AMap.LngLat(this.current1[1][0],this.current1[1][1]),

              function (status, result) {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === "complete") {
                  // console.log(result.waypoints)
                  console.log("绘制路线完成");
                } else {
                  console.log("获取路径失败：" + result);
                }
              }
            );
          })
          .catch(e => {
            console.log(e);
          })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    .title {
      font-size: 50px;
      color: #409eff;
      text-align: center;
      font-family: "宋体";
      font-weight: bold;
    }
    padding: 4px;
    position: relative;
  }


#container {
  padding: 4px;
  margin: 0px;
  width: 100%;
  height: 740px;
}

</style>
